<template>
  <view class="student-form">
    <view class="form-group">
      <text class="label">姓名：</text>
      <input type="text" v-model="formData.name" placeholder="请输入姓名" class="input" />
    </view>
    
    <view class="form-group">
      <text class="label">年龄：</text>
      <input type="number" v-model="formData.age" placeholder="请输入年龄" class="input" />
    </view>
    
    <view class="form-group">
      <text class="label">性别：</text>
      <radio-group @change="handleGenderChange" class="radio-group">
        <label class="radio-item">
          <radio value="男" :checked="formData.gender === '男'" /> 男
        </label>
        <label class="radio-item">
          <radio value="女" :checked="formData.gender === '女'" /> 女
        </label>
      </radio-group>
    </view>
    
    <view class="form-group">
      <text class="label">年级：</text>
      <picker @change="handleGradeChange" :value="gradeIndex" :range="grades" class="picker">
        <view class="picker-value">{{ formData.grade || '请选择年级' }}</view>
      </picker>
    </view>
    
    <view class="form-actions">
      <button class="submit-btn" @click="submitForm">{{ isEditing ? '更新' : '添加' }}</button>
      <button class="cancel-btn" @click="cancel">取消</button>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    student: Object
  },
  emits: ['submit', 'cancel'],
  data() {
    return {
      formData: {
        id: null,
        name: '',
        age: '',
        gender: '',
        grade: ''
      },
      isEditing: false,
      grades: ['大一', '大二', '大三', '大四'],
      gradeIndex: -1
    }
  },
  watch: {
    student: {
      immediate: true,
      handler(newVal) {
        if (newVal) {
          this.formData = { ...newVal };
          this.isEditing = true;
          this.gradeIndex = this.grades.indexOf(newVal.grade);
        } else {
          this.resetForm();
          this.isEditing = false;
        }
      }
    }
  },
  methods: {
    handleGenderChange(e) {
      this.formData.gender = e.detail.value;
    },
    handleGradeChange(e) {
      this.gradeIndex = e.detail.value;
      this.formData.grade = this.grades[this.gradeIndex];
    },
    submitForm() {
      if (!this.validateForm()) return;
      
      this.$emit('submit', { ...this.formData });
      this.resetForm();
    },
    cancel() {
      this.$emit('cancel');
      this.resetForm();
    },
    resetForm() {
      this.formData = {
        id: null,
        name: '',
        age: '',
        gender: '',
        grade: ''
      };
      this.gradeIndex = -1;
      this.isEditing = false;
    },
    validateForm() {
      if (!this.formData.name) {
        uni.showToast({ title: '请输入姓名', icon: 'none' });
        return false;
      }
      if (!this.formData.age) {
        uni.showToast({ title: '请输入年龄', icon: 'none' });
        return false;
      }
      if (!this.formData.gender) {
        uni.showToast({ title: '请选择性别', icon: 'none' });
        return false;
      }
      if (!this.formData.grade) {
        uni.showToast({ title: '请选择年级', icon: 'none' });
        return false;
      }
      return true;
    }
  }
}
</script>

<style scoped>
.student-form {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.form-group {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.label {
  width: 80px;
  font-weight: bold;
}

.input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.radio-group {
  display: flex;
  gap: 20px;
}

.radio-item {
  display: flex;
  align-items: center;
}

.picker {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
}

.picker-value {
  color: #333;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

button {
  padding: 10px 20px;
  border-radius: 4px;
  border: none;
  font-size: 16px;
}

.submit-btn {
  background-color: #4a9cff;
  color: white;
}

.cancel-btn {
  background-color: #f0f0f0;
  color: #333;
}
</style>